<template>
    <div class="password">
        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
        <div class="password-con">
             <div class="withdrawal-input">
                <div class="name">{{ $t('new.desc23') }}</div>
                <div class="input">
                    <input type="password" v-model="oldpassword" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" :placeholder="$t('new.desc24')" />
                </div>
            </div>
            <div class="withdrawal-input">
                <div class="name">{{ $t('new.desc25') }}</div>
                <div class="input">
                    <input type="password" v-model="newpassword" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" :placeholder="$t('new.desc26')" @change="handlerPsd" />
                </div>
            </div>
            <div class="withdrawal-input">
                <div class="name">{{ $t('set.retext') }}</div>
                <div class="input">
                    <input type="password" v-model="conpassword" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" :placeholder="$t('new.desc27')" @change="handlerConPsd" />
                </div>
            </div>
        </div>
         <div class="withdrawal-btn flexcenter" @click="handlerSubmit" :class="{ispcbtn:mobile==2}">{{ $t('word.ok') }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile:localStorage.getItem('ismobile'),
            titleSize: this.$t('new.desc8'),
            is_mt: true,
            oldpassword:'',
            newpassword:'',
            conpassword:''
        }
    },
    methods:{
        handlerPsd(pwd) {
            let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
            if (this.newpassword.length < 6) {
                this.$toast(this.$t('new.doc20'))
            }
        },
        handlerConPsd() {
            if (this.newpassword != this.conpassword) {
                this.$toast(this.$t('login.doc101'))
            }
        },
        handlerSubmit() {
             let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
            if (this.newpassword.length < 6) {
                this.$toast(this.$t('new.doc20'));
                return;
            }
            if (this.newpassword != this.conpassword) {
                this.$toast(this.$t('login.doc101'))
                return;
            }
            if(this.newpassword != '' && this.oldpassword != '' && this.conpassword != ''){
                let loginPassword=this.oldpassword.toString(),newpassword=this.newpassword.toString();
                this.$post(this.URL.withdrawal.updapassword,{
                    oldPassword: this.$md5(loginPassword),
                    newPassword:this.$md5(newpassword)
                }).then( res =>{
                    if(res.code==0){
                        this.$toast(this.$t('edit_mail.moidfy_successed'));
                            setTimeout(() => {
                                localStorage.removeItem('token')
                                    this.$router.push('/login')
                            }, 1500);
                    }else{
                        this.$toast(res.message);
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.password {
    .password-con {
        padding: 1.08rem .3rem;
         .withdrawal-input {
            padding: .32rem;
            margin-bottom: .2rem;
           background: #fff;
           border-radius: .2rem;


            .name {
                position: relative;
                font-size: .26rem;
                line-height: .3rem;

                p {
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: .22rem;

                    span {
                        color: #E51F1F;
                    }
                }
            }

            .input {
              margin-top: .2rem;

                input {
                    width: 100%;
                    height: .4rem;
                    font-size: .28rem;
                    border: 0;
                    background: none;

                    &::placeholder {
                        color: #98969E;
                    }
                }
            }

            .tips {
                margin-top: .1rem;
                font-size: .22rem;
                color: #999999;
            }
        }
    }
       .withdrawal-btn {
        position: fixed;
        bottom: .9rem;
        left: 50%;
        width: 6rem;
        height: 0.88rem;
        background: #713FF5;
        font-size: .32rem;
        color: #FFFFFF;
        border-radius: 0.12rem;
        transform: translateX(-50%);
    }
}
</style>
